<template>
  <div class="big-page dark-page">
    <page-header menu="DetailInformation"></page-header>
    <div class="detail-layout">
      <div class="menus">
        <div class="menu" v-for="menu in menus" :key="menu.id" :class="{'active': menu === activeMenu}" @click="clickMenu(menu)">
          <span>{{ menu.name }}</span>
          <div class="sub-menus" v-show="menu === activeMenu">
            <div class="sub-menu" v-for="sub in menu.children" :key="sub.id" @click.stop="chickSubMenu(sub, menu)">
              <span :class="{'active': sub === activeSubMenu}">{{ sub.name }}</span>
              <div class="grand-sub-menus" v-show="sub === activeSubMenu" v-if="sub.children">
                <div class="grand-sub-menu" v-for="grand in sub.children" :key="grand.id" @click.stop="chickGrandMenu(grand, sub, menu)">
                  <span :class="{'active': grand === activeGrandMenu}">{{ grand.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="column-row" v-if="activeMenu && activeSubMenu">
          <!-- 智慧后勤 -->
          <bus-chart v-if="activeSubMenu.name==='班车服务' && activeGrandMenu && activeGrandMenu.name==='路线查询'"></bus-chart>
          <bus-table size="big" v-if="activeSubMenu.name==='班车服务' && activeGrandMenu && activeGrandMenu.name==='人员查询'"></bus-table><!-- 三级 -->
          <bus-time-chart v-if="activeSubMenu.name==='班车服务' && activeGrandMenu && activeGrandMenu.name==='时间段查询'"></bus-time-chart>
          <warning-chart v-if="activeSubMenu.name==='班车服务' && activeGrandMenu && activeGrandMenu.name==='预警查询'"></warning-chart>

          <bx-list size="big" v-if="activeSubMenu.name==='维修服务' && activeGrandMenu && activeGrandMenu.name==='信息查询'"></bx-list><!-- 三级 -->
          <bx-chart v-if="activeSubMenu.name==='维修服务' && activeGrandMenu && activeGrandMenu.name==='总分析'"></bx-chart><!-- 三级 -->
          <bx-ly-chart v-if="activeSubMenu.name==='维修服务' && activeGrandMenu && activeGrandMenu.name==='楼宇分析'"></bx-ly-chart><!-- 三级 -->

          <!-- 智慧餐饮 -->
          <common-chart size="big" v-if="activeMenu.name==='智慧餐饮' && activeSubMenu.name==='基本信息'"></common-chart><!-- 二级 -->
<!--          <common-chart size="big" v-if="activeMenu.name==='智慧餐饮' && activeSubMenu.name==='统计分析'"></common-chart>-->
          <cy-chart v-if="activeMenu.name==='智慧餐饮' && activeSubMenu.name==='统计分析' && activeGrandMenu && activeGrandMenu.name==='采购统计'"></cy-chart><!-- 三级 -->
          <ykt-chart v-if="activeMenu.name==='智慧餐饮' && activeSubMenu.name==='统计分析' && activeGrandMenu && activeGrandMenu.name==='一卡通统计'"></ykt-chart><!-- 三级 -->
          <catering-yd-chart v-if="activeMenu.name==='智慧餐饮' && activeSubMenu.name==='统计分析' && activeGrandMenu && activeGrandMenu.name==='用电统计分析'"></catering-yd-chart><!-- 三级 -->
          <revenue-chart v-if="activeMenu.name==='智慧餐饮' && activeSubMenu.name==='统计分析' && activeGrandMenu && activeGrandMenu.name==='消费营收分析'"></revenue-chart><!-- 三级 -->

          <!-- 能源管理 -->
          <energy-chart-water size="big" v-if="activeSubMenu.name==='用水管理' && activeGrandMenu && activeGrandMenu.name==='水总量分析'"></energy-chart-water><!-- 三级 -->
          <energy-chart-building size="big" :type="1" v-if="activeSubMenu.name==='用水管理' && activeGrandMenu && activeGrandMenu.name==='楼宇用水分析'"></energy-chart-building><!-- 三级 -->

          <energy-chart size="big" v-if="activeSubMenu.name==='用电管理' && activeGrandMenu && activeGrandMenu.name==='电总量分析'"></energy-chart><!-- 三级 -->
          <energy-chart-building size="big" :type="2" v-if="activeSubMenu.name==='用电管理' && activeGrandMenu && activeGrandMenu.name==='楼宇用电分析'"></energy-chart-building><!-- 三级 -->
          <fj-list size="big" v-if="activeSubMenu.name==='用电管理' && activeGrandMenu && activeGrandMenu.name==='用电查询'"></fj-list><!-- 三级 -->
          <fj-chart size="big"  v-if="activeSubMenu.name==='用电管理' && activeGrandMenu && activeGrandMenu.name==='用电统计分析'"></fj-chart><!-- 三级 -->
          <fj-ratio size="big"  v-if="activeSubMenu.name==='用电管理' && activeGrandMenu && activeGrandMenu.name==='用电占比分析'"></fj-ratio><!-- 三级 -->
          <fjyd-list size="big" v-if="activeSubMenu.name==='用电管理' && activeGrandMenu && activeGrandMenu.name==='房间用电查询'"></fjyd-list><!-- 三级 -->
          <yd-chart size="big"  v-if="activeSubMenu.name==='用电管理' && activeGrandMenu && activeGrandMenu.name==='用电排行'"></yd-chart><!-- 三级 -->

          <energy-chart-gas size="big" v-if="activeSubMenu.name==='用气管理' && activeGrandMenu && activeGrandMenu.name==='气总量分析'"></energy-chart-gas><!-- 三级 -->
          <energy-chart-building size="big" :type="3" v-if="activeSubMenu.name==='用气管理' && activeGrandMenu && activeGrandMenu.name==='供暖供热用气分析'"></energy-chart-building><!-- 三级 -->

          <common-chart size="big" v-if="activeSubMenu.name==='用气管理' && activeGrandMenu && activeGrandMenu.name==='餐饮用气分析'"></common-chart><!-- 三级 -->
          <common-chart size="big" v-if="activeSubMenu.name==='用气管理' && activeGrandMenu && activeGrandMenu.name==='其他情况'"></common-chart><!-- 三级 -->

          <common-chart size="big" v-if="activeSubMenu.name==='碳排放管理' && activeGrandMenu && activeGrandMenu.name==='碳总量分析'"></common-chart><!-- 三级 -->
          <common-chart size="big" v-if="activeSubMenu.name==='碳排放管理' && activeGrandMenu && activeGrandMenu.name==='楼宇用碳分析'"></common-chart><!-- 三级 -->

          <!-- 校园规划 -->
          <building-info v-if="activeMenu.name === '校园规划' && activeSubMenu.name && activeSubMenu.name==='楼宇信息'"></building-info><!-- 二级 -->
          <construction-building-info v-if="activeMenu.name === '校园规划' && activeSubMenu && activeSubMenu.name==='在建楼宇信息'"></construction-building-info><!-- 二级 -->
          <campus-chart size="big" v-if="activeMenu.name === '校园规划' && activeSubMenu && activeSubMenu.name==='统计分析'"></campus-chart><!-- 二级 -->

          <!-- 智慧楼宇 -->
          <gc-list size="big" v-if="activeSubMenu.name==='工程信息' && activeGrandMenu && activeGrandMenu.name==='信息查询'"></gc-list><!-- 三级 -->
          <Gc-chart size="big" v-if="activeSubMenu.name==='工程信息' && activeGrandMenu && activeGrandMenu.name==='统计分析'"></Gc-chart><!-- 三级 -->
          <sb-list size="big" v-if="activeSubMenu.name==='设备信息' && activeGrandMenu && activeGrandMenu.name==='信息查询'"></sb-list><!-- 三级 -->
          <sb-chart size="big" v-if="activeSubMenu.name==='设备信息' && activeGrandMenu && activeGrandMenu.name==='统计分析'"></sb-chart><!-- 三级 -->

          <!-- 人员信息 -->
          <track-table size="big" v-if="activeMenu.name === '人员信息' && activeSubMenu.name==='人员轨迹'"></track-table><!-- 二级 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/views/pages/components/PageHeader'
import CommonChart from '@/views/pages/components/CommonChart'
import BusTable from '@/views/pages/logisticsModal/BusTable'
import TrackTable from '@/views/pages/personModal/TrackTable'
import BxList from '@/views/pages/logisticsModal/BxList'
import BxChart from '@/views/pages/logisticsModal/BxChart'
import BxLyChart from '@/views/pages/logisticsModal/BxLyChart'
import BusChart from '@/views/pages/logisticsModal/BusChart'
import BusTimeChart from '@/views/pages/logisticsModal/BusTimeChart'
import WarningChart from '@/views/pages/logisticsModal/WarningChart'
import EnergyChart from '@/views/pages/energyModal/EnergyChart'
import EnergyChartBuilding from '@/views/pages/energyModal/EnergyChartBuilding'
import EnergyChartWater from '@/views/pages/energyModal/EnergyChartWater'
import EnergyChartGas from '@/views/pages/energyModal/EnergyChartGas'
import CampusChart from '@/views/pages/campusModal/CampusChart'
import BuildingInfo from '@/views/pages/campusModal/BuildingInfo'
import ConstructionBuildingInfo from '@/views/pages/campusModal/ConstructionBuildingInfo'
import SbList from '@/views/pages/buildingModal/SbList'
import SbChart from '@/views/pages/buildingModal/SbChart'
import GcList from '@/views/pages/buildingModal/GcList'
import GcChart from '@/views/pages/buildingModal/GcChart'
import CateringYdChart from '@/views/pages/cateringModal/CateringYdChart'
import CyChart from '@/views/pages/cateringModal/CyChart'
import YktChart from '@/views/pages/cateringModal/YktChart'
import RevenueChart from '@/views/pages/cateringModal/RevenueChart'
import FjList from '@/views/pages/energyModal/FjList'
import FjChart from '@/views/pages/energyModal/FjChart'
import FjRatio from '@/views/pages/energyModal/FjRatio'
import FjydList from '@/views/pages/energyModal/FjydList'
import YdChart from '@/views/pages/energyModal/YdChart'
export default {
  name: 'DetailInformation',
  data () {
    return {
      title: '详细信息',
      activeMenu: {},
      activeSubMenu: {},
      activeGrandMenu: {},
      params: {
        keyword: null
      },
      menus: [
        {
          id: '1',
          name: '智慧后勤',
          clickable: false,
          children: [
            { id: '12', name: '班车服务', clickable: false, children: [{ id: '121', name: '路线查询', clickable: true }, { id: '122', name: '人员查询', clickable: true }, { id: '123', name: '时间段查询', clickable: true }, { id: '124', name: '预警查询', clickable: true }] },
            { id: '13', name: '维修服务', clickable: false, children: [{ id: '131', name: '信息查询', clickable: true }, { id: '132', name: '总分析', clickable: true }, { id: '133', name: '楼宇分析', clickable: true }] }
          ]
        },
        {
          id: '2',
          name: '智慧餐饮',
          clickable: false,
          children: [
            { id: '21', name: '基本信息', clickable: true },
            { id: '22', name: '统计分析', clickable: true, children: [{ id: '221', name: '采购统计', clickable: true }, { id: '222', name: '一卡通统计', clickable: true }, { id: '223', name: '用电统计分析', clickable: true }, { id: '224', name: '消费营收分析', clickable: true }] }
          ]
        },
        {
          id: '3',
          name: '能源管理',
          clickable: false,
          children: [
            { id: '31', name: '用水管理', clickable: false, children: [{ id: '311', name: '水总量分析', clickable: true }, { id: '312', name: '楼宇用水分析', clickable: true }] },
            {
              id: '32',
              name: '用电管理',
              clickable: false,
              children: [{ id: '321', name: '电总量分析', clickable: true }, { id: '322', name: '楼宇用电分析', clickable: true },
                { id: '323', name: '用电查询', clickable: true }, { id: '324', name: '用电统计分析', clickable: true }, { id: '325', name: '用电占比分析', clickable: true },
                { id: '326', name: '房间用电查询', clickable: true }, { id: '327', name: '用电排行', clickable: true }]
            }
            // {
            //   id: '33',
            //   name: '用气管理',
            //   clickable: false,
            //   children: [{ id: '331', name: '气总量分析', clickable: true }, { id: '332', name: '供暖供热用气分析', clickable: true },
            //     { id: '333', name: '餐饮用气分析', clickable: true }, { id: '334', name: '其他情况', clickable: true }]
            // },
            // { id: '34', name: '碳排放管理', clickable: false, children: [{ id: '341', name: '碳总量分析', clickable: true }, { id: '342', name: '楼宇用碳分析', clickable: true }] }
          ]
        },
        {
          id: '4',
          name: '校园规划',
          clickable: false,
          children: [
            { id: '41', name: '楼宇信息', clickable: true },
            { id: '42', name: '在建楼宇信息', clickable: true },
            { id: '43', name: '统计分析', clickable: true }
          ]
        },
        {
          id: '5',
          name: '智慧楼宇',
          clickable: false,
          children: [
            { id: '51', name: '工程信息', clickable: false, children: [{ id: '511', name: '信息查询', clickable: true }, { id: '512', name: '统计分析', clickable: true }] },
            { id: '52', name: '设备信息', clickable: false, children: [{ id: '521', name: '信息查询', clickable: true }, { id: '522', name: '统计分析', clickable: true }] }
          ]
        },
        {
          id: '6',
          name: '人员信息',
          clickable: false,
          children: [
            { id: '61', name: '人员轨迹', clickable: true }]
        }
      ]
    }
  },
  components: {
    PageHeader,
    CommonChart,
    BusTable,
    BusChart,
    BusTimeChart,
    WarningChart,
    BxList,
    BxChart,
    BxLyChart,
    TrackTable,
    EnergyChart,
    EnergyChartWater,
    EnergyChartBuilding,
    EnergyChartGas,
    BuildingInfo,
    ConstructionBuildingInfo,
    CampusChart,
    YktChart,
    RevenueChart,
    CyChart,
    CateringYdChart,
    SbList,
    SbChart,
    GcList,
    GcChart,
    FjList,
    FjChart,
    FjRatio,
    FjydList,
    YdChart
  },
  watch: {
    '$route.query': function () {
      this.init()
    }
  },
  created () {
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      if (this.$route.query.id) {
        this.menus.forEach(ele => {
          if (ele.id === this.$route.query.id) {
            this.clickMenu(ele)
          } else if (ele.children) {
            ele.children.forEach(el => {
              if (el.id === this.$route.query.id) {
                this.clickMenu(ele)
                this.chickSubMenu(el, ele)
              } else if (el.children) {
                el.children.forEach(e => {
                  if (e.id === this.$route.query.id) {
                    this.clickMenu(ele)
                    this.chickSubMenu(el, ele)
                    this.chickGrandMenu(e, el, ele)
                  }
                })
              }
            })
          }
        })
      }
    },
    clickMenu (menu) {
      this.activeMenu = {}
      this.activeSubMenu = null
      setTimeout(() => {
        this.activeMenu = menu
      }, 100)
    },
    chickSubMenu (son, parent) {
      this.activeMenu = parent
      this.activeSubMenu = {}
      this.activeGrandMenu = null
      setTimeout(() => {
        this.activeSubMenu = son
      }, 100)
    },
    chickGrandMenu (grand, son, parent) {
      this.activeMenu = parent
      this.activeSubMenu = son
      this.activeGrandMenu = null
      setTimeout(() => {
        this.activeGrandMenu = grand
      }, 100)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
